<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Title</title>
  <meta name="keywords" content=""/>
  <meta name="description" content=""/>
  <meta name="author" content="Y"/>
  <link rel="icon" href="favicon.ico">
  <script src="../../static/jqweui/lib/jquery-2.1.4.js"></script>
</head>
<body>



<div>


  <h2>图片上传DEMO</h2>

  <div>

    <div class="imgUpload-box">
      <input type="file" name="img" onchange="imgChange(event)" class="input-upload">

    </div>

    <br>
    <br>
    <button class="yui-sub">上传</button>

  </div>
</div>
<script>
  function imgChange(event) {
    var files = event.target.files || event.dataTransfer.files;
console.log(event)
    if (!files.length) {
      alert('上传失败,图片不存在');
    }
    let file = files[0];
    let type = file.type.split('/')[0]
// this.$notify({ type: 'success', message: file.size,  duration: 0})

    if (type === 'image') {
      let size3M = file.size < 1024 * 1024 * 10;
      if (!size3M) {
        reject('上传失败，请检查图片大小及格式是否正确');
      }
      let robj = new FormData();
      robj.append('file', file)

      $.ajax({
        type: "post",
        url: "http://127.0.0.1:8066/demo/upload",
        data: robj,
        processData:false,
        // dataType: "json",
        success: function (data) {
          console.log('ses', data)
        }
      });
    }else{
      alert('图片格式错误')
    }

  }


</script>

</body>
</html>
